<template>
  <div class="top-number">
    <div class="top-number__item">
      <div class="title">专家数</div>
      <div class="info clip-text ct1">
        <span class="num">8323</span>
        <span class="unit">人</span>
      </div>
    </div>
    <div class="top-number__item">
      <div class="title">农户数</div>
      <div class="info clip-text ct2">
        <span class="num">3230</span>
        <span class="unit">万人</span>
      </div>
    </div>
    <div class="top-number__item">
      <div class="title">累计服务次数</div>
      <div class="info clip-text ct3">
        <span class="num">7093</span>
        <span class="unit">万次</span>
      </div>
    </div>
    <div class="top-number__item">
      <div class="title">累计服务人次</div>
      <div class="info clip-text ct4">
        <span class="num">2413</span>
        <span class="unit">人次</span>
      </div>
    </div>
    <div class="top-number__item">
      <div class="title">累计服务时长</div>
      <div class="info clip-text ct5">
        <span class="num">2413</span>
        <span class="unit">天</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      topList: [
        {
          title: "专家数",
          key: "zj",
        },
        {
          title: "专家数",
          key: "zj",
        },
      ],
    };
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.top-number {
  display: flex;
  justify-content: space-around;
  z-index: 10;

  &__item {
    text-align: center;
    .title {
      font-size: 0.2rem;
      color: #e5f0f7;
      margin-bottom: 0.1rem;
    }

    .info {
      font-size: 0.24rem;

      .num {
        font-weight: bold;
      }
    }
  }
}

.clip-text {
  background-clip: text;
  -webkit-background-clip: text;

  color: transparent;
}

.ct1 {
  background-image: linear-gradient(90deg, #fdd747 0%, #f4b82e 100%);
}

.ct2 {
  background-image: linear-gradient(90deg, #72f8c1 0%, #48eb97 100%);
}

.ct3 {
  background-image: linear-gradient(90deg, #77bef6 0%, #4d91ed 100%);
}

.ct4 {
  background-image: linear-gradient(90deg, #7bf0ff 0%, #51dfff 100%);
}

.ct5 {
  background-image: linear-gradient(90deg, #ffa97a 0%, #ff6e4d 100%);
}
</style>
